import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import cn from 'classnames'

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      'flex w-full bg-muted text-muted-foreground border-x-0 border-t-0 border-b border-b-gray-400 border-solid mb-2',
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      'relative select-none inline-flex h-full items-center cursor-pointer justify-center border-0 border-b-2 border-[rgba(0,0,0,0)] bg-white rounded-md px-3 py-1 '
      + 'translate-y-px text-sm font-medium text-slate-600 ring-offset-background transition-all '
      + 'data-[state=active]:border-indigo-500  data-[state=active]:text-sky-700 hover:bg-sky-100',
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

export { Tabs, TabsList, TabsTrigger }
